<!-- 个人考勤记录 -->
<template>
    <div class="attendanceRecord">
        <el-form :inline="true" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
        	<el-form-item label="考勤组：">
        	    <el-select v-model="ruleForm.groupId" filterable >
        	        <el-option v-for="item in agrouplist"
        	                   :key="item.id"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
        	<el-form-item label="角色：">
        	    <el-select v-model="ruleForm.roleId" filterable >
        	        <el-option v-for="item in rolelist"
        	                   :key="item.id"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
            <el-form-item label="区域:" >
                <el-select v-model="ruleForm.regionId" filterable>
                    <el-option v-for="(item,index) in arealist"
                               :key="index"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="城市：">
                <el-select v-model="ruleForm.cityId" filterable >
                    <el-option v-for="(item,index) in citys"
                               :key="index"
                               :label="item.city"
                               :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>
        	<el-form-item label="姓名：">
        		<el-input v-model.trim="ruleForm.userNameOrPhone" placeholder="姓名/手机号/员工号"></el-input>
        	</el-form-item>
        	<el-form-item label="日期：">
    			<el-date-picker
    				v-model="time"
    				type="daterange"
    				range-separator="至"
    				start-placeholder="开始日期"
    				end-placeholder="结束日期">
    			</el-date-picker>
        	</el-form-item>
        	<el-form-item label="出勤状态：">
        	    <el-select v-model="ruleForm.status" filterable >
        	        <el-option v-for="(item,index) in attendancelist"
        	                   :key="index"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
        	<el-form-item label="账号状态">
        	    <el-select v-model="ruleForm.userStatus" filterable >
        	        <el-option v-for="item in accountlist"
        	                   :key="item.id"
        	                   :label="item.name"
        	                   :value="item.id">
        	        </el-option>
        	    </el-select>
        	</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
				<el-button type="primary" @click="exporthander">导出</el-button>
				<el-button @click="resethander">重置</el-button>
			</el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" fixed width="50" align="center"></el-table-column>
            <el-table-column label="姓名" prop="userName" width="100" align="center"></el-table-column>
            <el-table-column label="员工号" prop="jobNumber" align="center"></el-table-column>
            <el-table-column label="手机号" width="140" prop="userPhone" align="center"></el-table-column>
            <el-table-column label="考勤组" width="110" prop="groupName" align="center"></el-table-column>
            <el-table-column label="签到日期" width="130" prop="dateTimeStr" align="center"></el-table-column>
            <el-table-column label="角色" prop="roleName" align="center"></el-table-column>
            <el-table-column label="区域" prop="regionName" align="center"></el-table-column>
            <el-table-column label="城市" prop="cityName" align="center"></el-table-column>
            <el-table-column label="上班打卡" width="130" prop="onDateTimeStr" align="center"></el-table-column>
            <el-table-column label="打卡地点" width="260" prop="onAddress" align="center"></el-table-column>
            <el-table-column label="上午出勤(原始)" width="130" prop="onStatusHis" align="center"  :formatter="initStatus"></el-table-column>
            <el-table-column label="上午出勤(最新)" width="130" prop="onStatus" align="center"  :formatter="initStatus"></el-table-column>

            <el-table-column label="IMEI" width="260" prop="onImei" align="center"></el-table-column>
            <el-table-column label="下班打卡" width="130" prop="offDateTimeStr" align="center">
            </el-table-column>
            <el-table-column label="打卡地点" width="260" prop="offAddress" align="center"></el-table-column>
            <el-table-column label="下午出勤（原始)" width="130" prop="offStatusHis" align="center"  :formatter="initStatus"></el-table-column>
            <el-table-column label="下午出勤（最新)" width="130" prop="offStatus" align="center"  :formatter="initStatus"></el-table-column>

            <el-table-column label="IMEI" width="260" prop="offImei" align="center"></el-table-column>
            <el-table-column label="出勤状态(原始)" width="130" prop="statusHis"  :formatter="initStatus" align="center"></el-table-column>
            <el-table-column label="出勤状态(最新)" width="130" prop="status"  :formatter="initStatus" align="center"></el-table-column>
            <el-table-column label="账号状态" prop="userRepeats" align="center" :formatter="inituserRepeats">
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="ruleForm.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="ruleForm.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>
    </div>
</template>
<script>

import api from "@/api/apiPath"
import utils from "@/common/utils.js"
export default {
    name:"attendanceRecord",
    title:"个人考勤记录",
    data() {
        return {
			agrouplist:[],
			rolelist:[],
			arealist:[],
			citys:[],
			attendancelist:[
                {id:undefined,name:'全部'},
                {id:0,name:'正常'},
                {id:1,name:'迟到'},
                {id:2,name:'迟到超30分钟（严重迟到）'},
                {id:3,name:'早退'},
                {id:4,name:'旷工'},
                {id:5,name:'休息'},
                {id:6,name:'外勤'},
                {id:7,name:'调休'},
            ],
			accountlist:[
                {id:undefined,name:'全部'},
                {id:1,name:'正常'},
                {id:2,name:'异常'}
            ],
			time:[],
			tableData:[],
        	ruleForm:{
        		groupId:undefined,//考勤组
        		roleId:undefined,//角色
        		regionId:undefined,//区域
        		cityId:undefined,//城市
        		userNameOrPhone:'',//姓名
                dateTimeBegin:'',
                dateTimeEnd:'',
        		status:undefined,//出勤状态
        		userStatus:undefined,//账号状态
                pageNum: 1,
                pageSize: 10,
        	},
            totalSize: 0
        }
    },
    created() {
    	this.getlist()
        this.loadCity()
        this.getarealist()//区域
        this.getrolelist()//角色列表
        this.getgrouplist()//考勤组
    },
    activated(){
        this.searchList()
    },
    methods: {
        inituserRepeats(row, column, cellValue, index){
            if (cellValue == 1) {
                return '正常'
            }else if (cellValue == 2) {
                return '异常'
            }else {
                return ''
            }
        },
        getgrouplist(){
            this.$axios.get('/checkin/clockstatus/getgrouplist').then(res=>{
                this.agrouplist = res
                this.agrouplist.unshift({id:undefined,name:'全部'})
            })
        },
        initStatus(row, column, cellValue, index){
            if (cellValue == 0) {
                return '正常'
            }else if(cellValue == 1){
                return '迟到'
            }else if (cellValue == 2) {
                return '严重迟到'
            }else if (cellValue == 3) {
                return '早退'
            }else if (cellValue == 4) {
                return '旷工'
            }else if (cellValue == 5) {
                return '休息'
            }else if (cellValue == 6) {
                return '外勤'
            }else if (cellValue == 7) {
                return '调休'
            }
        },
        searchList(){
            this.ruleForm.pageNum = 1
            if (this.time) {
                this.ruleForm.dateTimeBegin =  utils.getTimeString(this.time[0]).substring(0,10)
                this.ruleForm.dateTimeEnd = utils.getTimeString(this.time[1]).substring(0,10)
            }
            this.getlist();
        },
        getrolelist(){
            this.$axios.get('/checkin/clockstatus/getrolelist').then(res=>{
                this.rolelist = res
                this.rolelist.unshift({id:undefined,name:'全部'})
            })
        },
        handleCurrentChange() {
            this.getlist()
        },
        handleSizeChange(val) {
            this.ruleForm.pageSize = val
            this.getlist();
        },
        getarealist(){
            this.$axios.get('city/region/all').then(res=>{                
                this.arealist = res
                this.arealist.unshift({id:undefined,name:'全部'})
            })
        },
        loadCity(){
            this.axios.post(api.CITYLIST).then(res => {
                if (res.data.code !== 200) {
                    this.$message(res.data.msg)
                }else {
                    this.citys = res.data.data.cityList
                    this.citys.unshift({id:undefined,city:'全部'})
                }
            })
        },
    	getlist(){
            this.$axios.post('/checkin/clockstatus/list',this.ruleForm).then(res=>{
                    this.tableData = res.list
                    this.totalSize= res.total
            })
    	},
    	exporthander(){
            delete this.ruleForm.pageSize;
            delete this.ruleForm.pageNum;
            this.$axios.service({
              method: "post",
              url: '/checkin/clockstatus/list/download',
              data: this.ruleForm,
              headers: {
                "content-type": "application/json; charset=utf-8",
                token: sessionStorage.getItem("cmsUser")
                  ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
                  : ""
              },
              responseType: "blob"
            })
              .then(res => {
                this.downloadFile(res.data);
              })
              .catch(res => {
                this.downloadFile(res.data);
              });
    	},
        // 导出
        downloadFile(data) {
            let url = window.URL.createObjectURL(new Blob([data]));
            let link = document.createElement("a");
            let fileName = `导出${utils.getTimeString(new Date())}.xls`;
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
            this.$message({
              message: "导出成功",
              type: "success"
            });
        },
    	resethander(){
            this.time = []
            this.ruleForm.groupId = undefined
            this.ruleForm.roleId = undefined
            this.ruleForm.regionId = undefined
            this.ruleForm.cityId = ''
            this.ruleForm.userNameOrPhone = ''
            this.ruleForm.dateTimeEnd = ''
            this.ruleForm.dateTimeBegin= ''
            this.ruleForm.status = ''
            this.ruleForm.userStatus = ''
    	}
    },
}
</script>
<style lang="stylus" scoped>


</style>